<template>
  <div class="app-print">
    <div class="title">{{ printObj.projectName }} 整改通知单</div>
    <el-container class="data-block">
      <dialog-video-player ref="videoPlayer" />
      <el-header class="data-block-title" height="30px">
        验收记录
      </el-header>
      <el-main class="data-block-content">
        <table class="data-block-content-table">
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>验收位置：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div v-if="printObj.unitType === 5" style="display: flex; justify-content: center">
                <line-draw-plane :file-id="printObj.inspectPublic.fileId" :line-arr="lineArr" />
              </div>
              <span v-else>
                {{ printObj.checkSite }}
              </span>
            </td>
          </tr>
          <tr v-if="showPileImage && printObj.unitType === 4">
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>桩基图片：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <el-image
                v-for="url in getImgUrls(printObj.pileFileIds)"
                :key="url"
                class="image"
                :style="{ width: width, height: width}"
                fit="contain"
                :src="url"
                :preview-src-list="getImgUrls(printObj.pileFileIds)"
              />
            </td>
          </tr>
          <tr v-if="printObj.unitType === 6">
            <td :colspan="2" class="content-table-cell content-table-label">
              <span style="margin-right: 20px">批次：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <span>第{{ printObj.batch }}批次</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>问题类型：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <span>{{ printObj.problemProperty }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>验收工序：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <span>{{ printObj.checkTableName }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>验收要点：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div style="margin-left: 20px">
                <div v-for="point in printObj.checkPoints" :key="point.fid" :style="{color:point.cfiskey == 1 ? 'red':'#000'}">{{ point.fseq }}、{{ point.cfcheckcontent }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>施工单位：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value" />
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>情况描述：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <span>{{ printObj.problemDesc }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>整改期限：</span>
            </td>
            <td :colspan="2" class="content-table-cell content-table-value">
              <span>{{ printObj.checkResult !== 10 ? printObj.reFormDate : '' }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>问题性质：</span>
            </td>
            <td :colspan="2" class="content-table-cell content-table-value">
              <span>{{ printObj.problemProperty }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>验收结果：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ printObj.checkResult | checkResult }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>验收人：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ printObj.checkUserName }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>验收日期：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ printObj.checkDate | dateFilter }}</span>
            </td>
          </tr>
          <tr>
            <td :rowspan="2" class="content-table-cell content-table-label" style="width: 10%">
              <span>现场照片</span>
            </td>
            <td class="content-table-cell content-table-label" style="width: 10%">
              <span>不符合要求</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div
                v-for="(attachment, index1) in printObj.attachment ? printObj.attachment['_1'] : []"
                :key="index1"
                class="content-item"
                :style="{ width, height: width, display: 'inline-block' }"
                @click="attachmentClick(attachment)"
              >
                <el-image
                  v-if="imageTypes.includes(attachment.type)"
                  class="item-image"
                  fit="contain"
                  :src="getFileRequestUrl(attachment.fileId)"
                  :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                />
                <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
              </div>
            </td>
          </tr>
          <tr>
            <td class="content-table-cell content-table-label" style="width: 10%">
              <span>符合要求</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div
                v-for="(attachment, index1) in printObj.attachment ? printObj.attachment['_0'] : []"
                :key="index1"
                class="content-item"
                @click="attachmentClick(attachment)"
              >
                <el-image
                  v-if="imageTypes.includes(attachment.type)"
                  class="item-image"
                  fit="contain"
                  :src="getFileRequestUrl(attachment.fileId)"
                  :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                />
                <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
              </div>
            </td>
          </tr>
          <tr v-for="(item, i) in printObj.formResult ? printObj.formResult.field : []" :key="i">
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>{{ item.fieldName }}：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <template v-if="item.fieldType === 'upload'">
                <div
                  v-for="(attachment, index1) in printObj.attachment ? printObj.attachment[item.id] : []"
                  :key="index1"
                  class="content-item"
                  @click="attachmentClick(attachment)"
                >
                  <el-image
                    v-if="imageTypes.includes(attachment.type)"
                    class="item-image"
                    fit="contain"
                    :src="getFileRequestUrl(attachment.fileId)"
                    :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                  />
                  <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
                </div>
              </template>
              <span v-else>{{ getFieldValue(printObj.formResult.field, printObj.formResult.result, item.id) }}</span>
            </td>
          </tr>
        </table>
      </el-main>
    </el-container>
    <el-container v-for="(item, index) in printObj.results" :key="'review' + index" class="data-block avoid">
      <el-header class="data-block-title" height="30px">
        第{{ index + 1 }}复核记录
      </el-header>
      <el-main class="data-block-content">
        <table class="data-block-content-table">
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>情况描述：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <span>{{ item.problemDesc }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>整改期限：</span>
            </td>
            <td :colspan="2" class="content-table-cell content-table-value">
              <span>{{ item.reformDate }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>问题性质：</span>
            </td>
            <td :colspan="2" class="content-table-cell content-table-value">
              <span>{{ item.problemProperty }}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="2" class="content-table-cell content-table-label">
              <span>复核结果：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ item.checkResult | checkResult }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>验收人：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ item.checkUserName }}</span>
            </td>
            <td class="content-table-cell content-table-label">
              <span>复核日期：</span>
            </td>
            <td class="content-table-cell content-table-value">
              <span>{{ item.checkDate }}</span>
            </td>
          </tr>
          <tr>
            <td :rowspan="2" class="content-table-cell content-table-label" style="width: 10%">
              <span>现场照片</span>
            </td>
            <td class="content-table-cell content-table-label" style="width: 10%">
              <span>不符合要求</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div
                v-for="(attachment, index1) in item.attachment ? item.attachment['_1'] : []"
                :key="index1"
                class="content-item"
                @click="attachmentClick(attachment)"
              >
                <el-image
                  v-if="imageTypes.includes(attachment.type)"
                  class="item-image"
                  fit="contain"
                  :src="getFileRequestUrl(attachment.fileId)"
                  :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                />
                <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
              </div>
            </td>
          </tr>
          <tr>
            <td class="content-table-cell content-table-label" style="width: 10%">
              <span>符合要求</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <div
                v-for="(attachment, index1) in item.attachment ? item.attachment['_0'] : []"
                :key="index1"
                class="content-item"
                @click="attachmentClick(attachment)"
              >
                <el-image
                  v-if="imageTypes.includes(attachment.type)"
                  class="item-image"
                  fit="contain"
                  :src="getFileRequestUrl(attachment.fileId)"
                  :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                />
                <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
              </div>
            </td>
          </tr>
          <tr v-for="(f, i) in (item.formResult ? item.formResult.field : [])" :key="i">
            <td :colspan="2" class="content-table-cell content-table-label" style="width: 20%;">
              <span>{{ f.fieldName }}：</span>
            </td>
            <td :colspan="5" class="content-table-cell content-table-value">
              <template v-if="f.fieldType === 'upload'">
                <div
                  v-for="(attachment, index1) in item.attachment ? item.attachment[f.id] : []"
                  :key="index1"
                  class="content-item"
                  @click="attachmentClick(attachment)"
                >
                  <el-image
                    v-if="imageTypes.includes(attachment.type)"
                    fit="contain"
                    :src="getFileRequestUrl(attachment.fileId)"
                    :preview-src-list="[getFileRequestUrl(attachment.fileId)]"
                  />
                  <i v-if="videoTypes.includes(attachment.type)" class="video-icon el-icon-video-camera" />
                </div>
              </template>
              <span v-else>{{ getFieldValue(item.formResult.field, item.formResult.result, f.id) }}</span>
            </td>
          </tr>
        </table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import LineDrawPlane from './components/LineDrawPlane'
import DialogVideoPlayer from './../statement/components/DialogVideoPlayer'
export default {
  name: 'RoomSpace',
  components: {
    LineDrawPlane,
    DialogVideoPlayer
  },
  props: {
    printObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showPileImage: { type: Boolean, default: false }
  },
  data() {
    return {
      width: '330px',
      basePicUrl: process.env.VUE_APP_BASE_API + '/file/download?fileKey=',
      imageTypes: ['png', 'jpg', 'jpeg'],
      videoTypes: ['mp4']
    }
  },
  computed: {
    lineArr: {
      get() {
        return this.getLineArr()
      }
    }
  },
  mounted() {
    // this.width = (document.getElementById('img-line').offsetWidth - 160) / 2 + 'px'
  },
  methods: {
    getImgUrls(arr) {
      let urls = []
      if (arr && arr.length > 0) {
        urls = arr.map(id => process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + id)
      }
      return urls
    },
    getLineArr() {
      const arr = []
      const printObj = this.printObj
      const inspectPublic = printObj.inspectPublic
      if (inspectPublic.drawArea) {
        arr.push({ 'points': JSON.parse(inspectPublic.drawArea), status: printObj.checkResult, sourceId: inspectPublic.id })
      }
      return arr
    },
    getFieldValue(fields = [], result = {}, fieldId = '') {
      try {
        const field = fields.find(item => item.id === fieldId)
        let value = result[fieldId]
        if (field && field.options) {
          const options = JSON.parse(field.options)
          if (value && !Array.isArray(value)) {
            value = value.split(',')
          }
          const option = options.filter(item => value.indexOf(item.value) > -1)
          if (option) {
            return option.map(op => op.label).join(', ')
          } else {
            return value
          }
        } else {
          return value
        }
      } catch (ex) {
        return ''
      }
    },
    /**
     * 获取文件请求链接
     * @param fileId
     */
    getFileRequestUrl(fileId) {
      return process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + fileId
    },
    /**
     * 播放视频
     * @param file
     */
    attachmentClick(file) {
      debugger
      if (this.videoTypes.includes(file.type)) {
        const url = process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + file.fileId
        // this.$refs.videoPlayer.play('http://172.22.203.142:8088/prod-api/file/download?fileKey=4642823')
        this.$refs.videoPlayer.play(url)
      }
    }
  }
}
</script>
<style scoped lang="scss">
  $textColor: #303133;
  $textCommonColor: #606266;
  $borderColor:1px solid #95b8e7;
  $backColor: #e8f1ff;
  $lineHeight: 30px;
  .app-print {
    font-size: 12px;
    margin: 0 20px;
    color: $textColor;
    .title {
      margin-bottom:20px;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: $textCommonColor;
    }
    .check {
      border: $borderColor;
      .check-title {
         color: #0e2d83;
         background-color: $backColor;
         line-height: $lineHeight;
         height: $lineHeight;
         border: $borderColor;
         padding-left: 10px;
      }
      .check-content {
        padding: 10px;
      }
    }
    .review {
      margin-top: 10px;
      // page-break-after:always; // 分页属性
    }
    .avoid {
      page-break-inside: avoid; // 分页避免拆分
    }
    .multiple{
      display: flex;
      .label-value {
        flex: 1;
        .check-user {
          text-align: left;
          padding-left: 10px;
          color: $textColor;
        }
        .value-wrap {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .value-value {
            flex: 1;
          }
          .value-label {
            color: $textCommonColor;
            border-left: $borderColor;
            padding-right: 20px;
            width: 140px;
            text-align: right;
          }
        }
        .value-label-value {
          display: flex;
        }
      }
    }
    .label-value {
      display: flex;
      border: $borderColor;
      border-bottom: none;
      line-height: $lineHeight;
      .label {
        width: 160px;
        flex: 0 0 160px;
        color: $textCommonColor;
        border-right: $borderColor;
        text-align: right;
        padding-right: 20px;
      }
      .value {
        padding-left: 20px;
      }
    }
    .check-point {
      display: flex;
      border: $borderColor;
      border-bottom: none;
      .label {
        width: 160px;
        flex-shrink: 0;
        color: $textCommonColor;
        border-right: $borderColor;
        padding: 5px 20px 5px 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .value {
        padding: 5px 20px;
      }
    }
    .border-bottom {
      border-bottom: $borderColor;
    }
    .none-left-border {
      border-left: none;
      .label {
        width: 140px;
      }
    }
    .scene-img {
      display: flex;
      align-items: center;
      border: $borderColor;
      color: $textColor;
      .label-one {
        width: 70px;
        color: $textCommonColor;
        text-align: center;
      }
      .label-two {
        flex: 1;
        .img-type {
          display: flex;
          .img-title {
            color: $textCommonColor;
            width: 90px;
            border-right: $borderColor;
            border-left: $borderColor;
            padding: 6px 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .img-line {
            flex: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .image-size {
              width: calc(50%  - 20px) !important;
              margin:10px 10px 10px 10px;
            }
          }
        }
        .img-type:nth-child(1) {
          border-bottom: $borderColor;
        }
      }
    }
    .data-block {
      margin-top: 10px;
      .data-block-title {
        color: #0e2d83;
        background-color: #e8f1ff;
        line-height: 30px;
        height: 30px;
        border: 1px solid #95b8e7;
        padding-left: 10px;
      }
      .data-block-content {
        border: 1px solid #95b8e7;
        border-top: 0;
        padding: 10px;
        .data-block-content-table {
          width: 100%;
          border-collapse:collapse;
          .content-table-cell {
            border: 1px solid #95b8e7;
            height: 30px;
            line-height: 30px;
            padding: 0
          }
          .content-table-label {
            color: #606266;
            text-align: right;
            span {
              margin-right: 20px;
            }
          }
          .content-table-value {
            span {
              margin-left: 20px;
            }
            .content-item {
              display: inline-block;
              background-color: #F2F6FC;
              height: 300px;
              width: 300px;
              margin: 10px;
              line-height: 300px;
              text-align: center;
              cursor: pointer;
              .item-image {
                width: 100%;
                height: 100%;
                overflow: inherit;
              }
              .video-icon {
                font-size: 46px;
              }
            }
          }
        }
      }
    }
  }
  .extension-form:last-child {
    border-bottom: $borderColor;
  }
</style>
